<template>
  <div class="questionnaire">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>生活习惯问卷调查</span>
          <el-tag v-if="!hasFilledQuestionnaire" type="danger" size="small">必填</el-tag>
        </div>
      </template>
      
      <el-alert 
        v-if="!hasFilledQuestionnaire"
        title="重要提醒" 
        type="warning" 
        :closable="false"
        style="margin-bottom: 20px;"
      >
        为了更好地为您分配合适的宿舍，请务必完整填写以下问卷调查。填写完成后才能使用其他功能。
      </el-alert>
      
      <el-form :model="form" :rules="rules" ref="formRef" label-width="150px">
        <el-form-item label="起床时间" prop="wakeTime">
          <el-select v-model="form.wakeTime" placeholder="请选择起床时间">
            <el-option label="6点" :value="6" />
            <el-option label="7点" :value="7" />
            <el-option label="8点" :value="8" />
            <el-option label="9点" :value="9" />
            <el-option label="10点" :value="10" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="入睡时间" prop="sleepTime">
          <el-select v-model="form.sleepTime" placeholder="请选择入睡时间">
            <el-option label="21点" :value="21" />
            <el-option label="22点" :value="22" />
            <el-option label="23点" :value="23" />
            <el-option label="24点" :value="24" />
            <el-option label="1点" :value="25" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="假期起床差异" prop="holidayDiff">
          <el-input-number 
            v-model="form.holidayDiff" 
            :min="0" 
            :max="3" 
            :precision="1"
            :step="0.5"
          />
          <span class="form-tip">小时（相比平时晚多久起床）</span>
        </el-form-item>
        
        <el-form-item label="打扫频率" prop="cleanFreq">
          <el-rate v-model="form.cleanFreq" :max="5" />
          <span class="form-tip">1星最低，5星最高</span>
        </el-form-item>
        
        <el-form-item label="整洁容忍度" prop="cleanTolerance">
          <el-slider v-model="form.cleanTolerance" :min="1" :max="10" show-stops />
          <span class="form-tip">1分最低，10分最高</span>
        </el-form-item>
        
        <el-form-item label="是否介意噪音" prop="studyNoise">
          <el-radio-group v-model="form.studyNoise">
            <el-radio label="是">是</el-radio>
            <el-radio label="否">否</el-radio>
            <el-radio label="有时">有时</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="兴趣爱好" prop="hobbies">
          <el-checkbox-group v-model="hobbiesArray">
            <el-checkbox label="游戏">游戏</el-checkbox>
            <el-checkbox label="运动">运动</el-checkbox>
            <el-checkbox label="音乐">音乐</el-checkbox>
            <el-checkbox label="文艺">文艺</el-checkbox>
            <el-checkbox label="休闲">休闲</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        
        <el-form-item label="上网频率" prop="netTime">
          <el-radio-group v-model="form.netTime">
            <el-radio label="常玩">常玩</el-radio>
            <el-radio label="一般">一般</el-radio>
            <el-radio label="不常玩">不常玩</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="是否吸烟" prop="smoking">
          <el-radio-group v-model="form.smoking">
            <el-radio label="是">是</el-radio>
            <el-radio label="否">否</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="submitQuestionnaire" :loading="loading">
            提交问卷
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import request from '../../utils/request'

const formRef = ref()
const loading = ref(false)
const hasFilledQuestionnaire = ref(false)

const form = reactive({
  wakeTime: null,
  sleepTime: null,
  holidayDiff: 0,
  cleanFreq: 3,
  cleanTolerance: 5,
  studyNoise: '有时',
  hobbies: '',
  netTime: '一般',
  smoking: '否'
})

const hobbiesArray = ref([])

const rules = {
  wakeTime: [{ required: true, message: '请选择起床时间', trigger: 'change' }],
  sleepTime: [{ required: true, message: '请选择入睡时间', trigger: 'change' }],
  cleanFreq: [{ required: true, message: '请选择打扫频率', trigger: 'change' }],
  cleanTolerance: [{ required: true, message: '请选择整洁容忍度', trigger: 'change' }]
}

// 监听爱好选择变化
const hobbiesString = computed(() => {
  return hobbiesArray.value.join(',')
})

const loadQuestionnaire = async () => {
  try {
    const response = await request.get('/api/questionnaire/my')
    if (response.data.code === 200 && response.data.data) {
      const data = response.data.data
      hasFilledQuestionnaire.value = true
      Object.assign(form, data)
      if (data.hobbies) {
        hobbiesArray.value = data.hobbies.split(',')
      }
    } else {
      hasFilledQuestionnaire.value = false
    }
  } catch (error) {
    console.error('加载问卷失败:', error)
    hasFilledQuestionnaire.value = false
  }
}

const submitQuestionnaire = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true
      try {
        const submitData = {
          ...form,
          hobbies: hobbiesString.value
        }
        
        const response = await request.post('/api/questionnaire/submit', submitData)
        if (response.data.code === 200) {
          ElMessage.success('提交成功！现在可以使用系统的其他功能了')
          hasFilledQuestionnaire.value = true
          // 如果是首次填写，跳转到首页
          if (!hasFilledQuestionnaire.value) {
            setTimeout(() => {
              window.location.href = '/student/dashboard'
            }, 1500)
          }
        }
      } catch (error) {
        ElMessage.error('提交失败')
      } finally {
        loading.value = false
      }
    }
  })
}

onMounted(() => {
  loadQuestionnaire()
})
</script>

<style scoped>
.questionnaire {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-tip {
  margin-left: 10px;
  color: #909399;
  font-size: 12px;
}
</style> 